<template>
  <!-- 设备监测 -->
  <div class="equipMonitoringContent">
    <a-tabs
      v-model:activeKey="activeKey"
      type="card"
      size="small"
      @change="handleTabChange"
    >
      <a-tab-pane
        v-for="item in EQUIP_CHART_LIST"
        :key="item.value"
        :tab="item.label"
      />
    </a-tabs>
    <component :is="chartComponent" :stationInfo="stationInfo" ref="chartRef" />
  </div>
</template>
<script setup>
;

import {
  EQUIP_CHART_ENUM,
  EQUIP_CHART_LIST,
} from "@/constants/monitoringCenter";
import Power from "./power/index.vue";
import ChargeDischarge from "./chargeDischarge/index.vue";
import VoltageCurrent from "./voltageCurrent/index.vue";
import VoltageConsistency from "./voltageConsistency/index.vue";
import VoltageDistribution from "./voltageDistribution/index.vue";
import VoltageTrend from "./voltageTrend/index.vue";
import Battery from "./Battery/index.vue";
import TemperatureTrend from "./temperatureTrend/index.vue";
import TemperatureDistribution from "./temperatureDistribution/index.vue";
import BMS from "./BMS/index.vue";
import Thermal from "./thermal/index.vue";
import Attenuation from "./attenuation/index.vue";
import ElectricityMeter from "./electricityMeter/index.vue";
import { dispose } from "echarts";
const $api = inject("$api");
const activeKey = ref(EQUIP_CHART_ENUM.POWER);
const props = defineProps({
  stationInfo: {
    type: Number,
  },
});
const chartComponent = computed(() => {
  switch (activeKey.value) {
    case EQUIP_CHART_ENUM.POWER:
      // 功率曲线
      return Power;
    case EQUIP_CHART_ENUM.CHARGEDISCHARGE:
      // 充放电曲线
      return ChargeDischarge;
    case EQUIP_CHART_ENUM.BMS:
      // 电压/电流曲线
      return BMS;
    case EQUIP_CHART_ENUM.VOLTAGE_AND_CURRENT:
      // 电压/电流曲线
      return VoltageCurrent;
    case EQUIP_CHART_ENUM.BATTERY:
      // 单体电池
      return Battery;
    // case EQUIP_CHART_ENUM.VOLTAGE_CONSISTENCY:
    //   // 单体电压监控
    //   return VoltageConsistency
    case EQUIP_CHART_ENUM.VOLTAGE_DISTRIBUTION:
      // 电压分布趋势
      return VoltageDistribution;
    case EQUIP_CHART_ENUM.VOLTAGE_TREND:
      // 单体电压趋势
      return VoltageTrend;
    // case EQUIP_CHART_ENUM.TEMPERATURE:
    //   // 单体温度监控
    //   return Temperature;
    case EQUIP_CHART_ENUM.TEMPERATURE_DISTRIBUTION:
      // 温度分布统计
      return TemperatureDistribution;
    case EQUIP_CHART_ENUM.TEMPERATURE_TREND:
      // 单体温度趋势
      return TemperatureTrend;
    case EQUIP_CHART_ENUM.THERMAL:
      // 热管理
      return Thermal;
    case EQUIP_CHART_ENUM.ATTENUATION:
      // 衰减指标
      return Attenuation;
    case EQUIP_CHART_ENUM.ELECTRICITY_METER:
      // 电表
      return ElectricityMeter;
    default:
      return Power;
  }
});
const chartRef = ref(null);
const handleChageStation = () => {
  chartRef.value.handleChageStation();
};
const handleTabChange = async () => {
  await nextTick();
  handleChageStation();
};
onMounted(() => {
  document.body.classList.add("scrollHidden");
});
onUnmounted(() => {
  // 移除样式
  document.body.classList.remove("scrollHidden");
});
defineExpose({ handleChageStation });
</script>
<style lang="less">
.scrollHidden {
  overflow: hidden;
}
.equipMonitoringContent {
  .chartContent {
    overflow-y: scroll;
    height: calc(100vh - 250px);
  }
}
</style>
<style lang="less" scoped>
::v-deep(.ant-tabs-nav) {
  margin: 0;
}
::v-deep(.ant-tabs-tab) {
  border: 0 !important;
}
.equipMonitoringContent {
  height: 100%;
}

.layoutContent {
  height: calc(100vh - 62px);
  overflow-y: hidden;
}
</style>
